//  Copyright (c) 2018-present, Cruise LLC
//
//  This source code is licensed under the Apache License, Version 2.0,
//  found in the LICENSE file in the root directory of this source tree.
//  You may not use this file except in compliance with the License.

@import "./colors.module.scss";

$padding: 8px;
$text-size: 12px;
$control-padding: 8px 8px 8px 16px;
$control-margin: 0 0.2em;

%bold {
  font-weight: bold;
  letter-spacing: 0.4px;
}

%floating-box-close-icon {
  position: absolute;
  right: 7px;
  top: 7px;
  cursor: pointer;
  font-size: 16px;
}

%floating-box {
  background-color: $dark3;
  border-radius: 4px;
  padding: 0;
  box-shadow: 0 0px 32px rgba(8, 8, 10, 0.6);
  overflow: hidden;
  pointer-events: auto;
  flex-shrink: 0;
}

%menu-item {
  text-decoration: none;
  padding: 8px 16px;
  cursor: pointer;
  color: $text-control;
  user-select: none;
  display: flex;
  align-items: center;

  &:hover {
    @extend %menu-item-hover;
  }
}

%modal-subtitle {
  color: $text-bright;
  font-size: 16px;
  line-height: 16px * 1.25;
}

%clearfix {
  &:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }
}

%menu-item-active,
%menu-item-hover {
  color: rgba(255, 255, 255, 1);
  background-color: $dark5;
}

$sans-serif-font: "Inter UI", -apple-system, BlinkMacSystemFont, sans-serif;

@mixin sans-serif {
  font-family: $sans-serif-font;
  font-feature-settings: "tnum";
}

$monospace-font: "Roboto Mono", Menlo, Inconsolata, "Courier New", Courier, monospace;
@mixin monospace {
  font-family: $monospace-font;
}

%list-item-icon {
  margin-right: 4px;
  svg {
    font-size: 16px;
    position: relative;
    top: -1px;
  }
}

:export {
  monospaceFont: $monospace-font;
}
